
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">

</head>
<body>
<form class="layui-form layui-form-pane" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 10px 00px 0px 0px" action="">
    <div class="layui-form-item">
        <div class="layui-inline">

            <label class="layui-form-label">管理员名字</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">管理员密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" lay-verify="required" class="layui-input">
            </div>
        </div>


        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="add-admin">添加管理员</button>
        </div>
    </div>
</form>

<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-input-block">
            <button id="addAdmin" class="layui-btn"  lay-filter="addAdmin">添加管理员</button>
        </div>
    </div>
</div>
<div class="layui-row">
    <table class="layui-hide" id="myTable" lay-filter="myTable"></table>
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.$;
            var form = layui.form;
            var table = layui.table;

            table.render({
                elem:"#myTable"//指定到一个html元素，写的是选择器
                ,url:"${pageContext.request.contextPath}/admin/selectAll"//发送请求的后台地址
                ,toolbar:"#toolbarDemo"
                ,cols:[[
                    {field:"id",title:"编号",width:60}
                    ,{field:"username",title:"名字",width:100}
                    ,{field:"password",title:"密码",width:150}
                ]]
                , page: true //开启分页
                ,limit:3
                ,limits:[3,6,9]
            });
            //添加  开始 -----------------
            $("#addAdmin").click(function () {
                layer.open({
                    type:1,
                    title:'添加',
                    area:'800px',
                    content:$("#addForm"),
                    maxmin:true
                })
            })
            form.on('submit(add-admin)', function (data) {
                $.ajax({
                    url:'${pageContext.request.contextPath}/admin/addAdmin',
                    data:$("#addForm").serialize(),
                    success:function (result) {
                        if(result.flag){
                            table.reload('myTable');
                            $("#addForm")[0].reset();
                            layer.closeAll();
                            layer.msg("添加成功");
                        }else if(result.flag==false){
                            layer.msg("添加异常")
                        }
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //  添加 结束 ---------------------------



        })


    </script>
</body>
</html>
